//pages/exercise/done.vue
<template>
  <view class="page">
    <!-- 统计卡片 -->
    <view class="stats-card">
      <view class="stat-item">
        <text class="stat-num">{{ stats.totalExercises }}</text>
        <text class="stat-label">📝 已完成练习</text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item">
        <text class="stat-num">{{ stats.averageScore }}%</text>
        <text class="stat-label">⭐ 平均正确率</text>
      </view>
      <view class="stat-divider"></view>
      <view class="stat-item">
        <text class="stat-num">{{ stats.streak }}</text>
        <text class="stat-label">🔥 连续学习</text>
      </view>
    </view>

    <!-- 练习历史 -->
    <view class="history-section">
      <view class="section-header">
        <text class="section-title">📚 练习记录</text>
        <text class="total-count">共 {{exerciseHistory.length}} 条记录</text>
      </view>

      <scroll-view class="history-list" scroll-y>
        <view 
          v-for="item in exerciseHistory" 
          :key="item.id" 
          class="history-card"
          @click="goToDetail(item.id)"
        >
          <!-- 卡片头部 -->
          <view class="card-header">
            <text class="exercise-name">{{ item.title }}</text>
            <text class="score" :class="{'high-score': item.score >= 80}">
              {{ item.score >= 80 ? '🎯 ' : '💪 ' }}{{ item.score }}分
            </text>
          </view>

          <!-- 卡片内容 -->
          <view class="card-content">
            <view class="info-row">
              <text class="info-label">⏰ 完成时间</text>
              <text class="info-value">{{ item.completionTime }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">⌛ 用时</text>
              <text class="info-value">{{ item.duration }}分钟</text>
            </view>
            <view class="info-row">
              <text class="info-label">❌ 错题数</text>
              <text class="info-value">{{ item.wrongCount }}道</text>
            </view>
          </view>

          <!-- 卡片操作 -->
          <view class="card-actions">
            <button 
              class="action-btn review-btn" 
              @click.stop="goToReview(item.id)"
            >
              📖 查看解析
            </button>
            <button 
              class="action-btn practice-btn" 
              @click.stop="goToRetry(item.id)"
            >
              ✍️ 重新练习
            </button>
          </view>

          <!-- 练习标签 -->
          <view class="exercise-tags">
            <text class="tag">{{ getDifficultyTag(item.score) }}</text>
            <text class="tag">{{ getDurationTag(item.duration) }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 统计数据
const stats = ref({
  totalExercises: 68,
  averageScore: 85,
  streak: 7
})

// 练习历史数据
const exerciseHistory = ref([
  {
    id: 1,
    title: '2024考研数学一模拟试题',
    score: 88,
    completionTime: '2024-12-29 14:30',
    duration: 120,
    wrongCount: 3
  },
  {
    id: 2,
    title: '高等数学期末重点练习',
    score: 92,
    completionTime: '2024-12-28 16:45',
    duration: 90,
    wrongCount: 2
  },
  {
    id: 3,
    title: '线性代数基础概念练习',
    score: 75,
    completionTime: '2024-12-27 10:20',
    duration: 60,
    wrongCount: 5
  }
])

// 获取难度标签
const getDifficultyTag = (score) => {
  if (score >= 90) return '🏅 优秀'
  if (score >= 80) return '✨ 良好'
  if (score >= 60) return '💪 继续加油'
  return '📝 需要复习'
}

// 获取时长标签
const getDurationTag = (duration) => {
  if (duration <= 30) return '⚡ 快速完成'
  if (duration <= 60) return '⏱️ 正常节奏'
  return '🎯 深入思考'
}

// 查看练习详情
const goToDetail = (id) => {
  uni.navigateTo({
    url: `/pages/exercise/detail?id=${id}`
  })
}

// 查看解析
const goToReview = (id) => {
  uni.navigateTo({
    url: `/pages/exercise/review?id=${id}`
  })
}

// 重新练习
const goToRetry = (id) => {
  uni.showModal({
    title: '提示 ⚡',
    content: '确定要重新开始这套练习吗？',
    success: (res) => {
      if (res.confirm) {
        uni.navigateTo({
          url: `/pages/exercise/practice?id=${id}`
        })
      }
    }
  })
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 30rpx;
}

.stats-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 40rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-divider {
  width: 2rpx;
  height: 80rpx;
  background: #eee;
}

.stat-num {
  font-size: 40rpx;
  font-weight: bold;
  color: #A8BF8F;
  margin-bottom: 12rpx;
}

.stat-label {
  font-size: 26rpx;
  color: #999;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.total-count {
  font-size: 26rpx;
  color: #999;
}

.history-list {
  height: calc(100vh - 340rpx);
}

.history-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.exercise-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.score {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff6b6b;
}

.score.high-score {
  color: #A8BF8F;
}

.card-content {
  margin-bottom: 20rpx;
}

.info-row {
  display: flex;
  margin-bottom: 12rpx;
  align-items: center;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 26rpx;
  color: #999;
  width: 140rpx;
}

.info-value {
  font-size: 26rpx;
  color: #666;
}

.exercise-tags {
  display: flex;
  gap: 12rpx;
  margin-top: 20rpx;
  flex-wrap: wrap;
}

.tag {
  font-size: 24rpx;
  color: #A8BF8F;
  background: rgba(168, 191, 143, 0.1);
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
}

.card-actions {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 28rpx;
  border-radius: 40rpx;
  border: none;
}

.review-btn {
  background: rgba(168, 191, 143, 0.1);
  color: #A8BF8F;
}

.practice-btn {
  background: #A8BF8F;
  color: #fff;
}

.action-btn:active {
  opacity: 0.8;
}
</style>